<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Grid Test</title>
<!-- css -->
<link id="fd_theme"href="../../styles/theme/aristo/theme.css" rel="stylesheet" type="text/css" />
<link href="../../styles/primeui-1.1-min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{font-size: 12px}
</style>
<!-- lib -->
<script type="text/javascript" src="../../src/FDLib/FDLib.js"></script>
<script type="text/javascript" src="../../src/JsMap.js"></script>
<!-- app js -->
<script type="text/javascript" src="../theme.js"></script>
<script type="text/javascript" src="data.js"></script>
<style type="text/css">
.bg-color{
	background-color:#fff200;
}
</style>
</head>
<body>
<button onclick="selectRow(1)">selectRow(1)</button>
<button onclick="getSelectedLine()">getSelected()</button>
<button onclick="clearSelected()">clearSelected()</button>
<div id="grid"></div>
<table>
	<tr>
		<td>姓名:<input type="text" id="username" /></td>
	</tr>
	<tr>
		<td>出生日期:<input type="text" id="birth" /></td>
	</tr>
	<tr>
		<td>联系地址:<input type="text" id="addr" /></td>
	</tr>
</table>
<br>
<div id="msg"></div>
<button onclick="selectRecord(5)">selectRecord(5)</button>
<button onclick="checkRow(1)">checkRow(1)</button>
<button onclick="getChecked()">getChecked()</button>
<button onclick="uncheckRow(1)">uncheckRow(1)</button>
<button onclick="checkAll()">checkAll()</button>
<button onclick="uncheckAll()">uncheckAll()</button>
<button onclick="setRowDisabled()">setRowDisabled()</button>
<button onclick="setRowEnabled()">setRowEnabled()</button>

<div id="grid2"></div>

<script type="text/javascript">
FDLib.setDir('../../src/');
FDLib.openDebug();
var grid;
var grid2;
	     
FDLib.loadJs('FDGrid',function(){
	
	
	grid = new FDGrid({
		domId:'grid'
		//,url:'data.json'
		//,width:'200px'
		,data:gridData
		,id:'id'
		,onClickRow:function(rowData){
			FDLib.getEl('username').value = rowData.username;
			FDLib.getEl('addr').value = rowData.addr;
			FDLib.getEl('birth').value = rowData.birthday;
		}
		,selectOption:{singleSelect:true,onclick:selectHandler,onload:onloadSelect}
		,fitColumns:false
		,columns:[
			{text:"姓名",name:"username"}
			,{text:"联系地址",name:"addr"}
			,{text:"出生日期",name:"birthday"}
			,{text:"联系地址",name:"addr",style:{width:'200px'}}
			,{text:"出生日期",name:"birthday"}
			,{text:"联系地址",name:"addr"}
			,{text:"出生日期",name:"birthday"}
			,{text:"联系地址",name:"addr"}
			,{text:"出生日期",name:"birthday"}
			,{text:"联系地址",name:"addr"}
			,{text:"出生日期",name:"birthday"}
			,{text:"年龄",name:"age"}
		]
		,actionButtons:[
			{text:'修改',onclick:update}
			,{text:'删除',onclick:del,showFun:function(rowData,rowIndex){
				// 如果是3的倍数就显示删除按钮
				return ((rowIndex+1) % 3 === 0)
			}}
		]
	});
	
	grid.search();
	
	grid2 = new FDGrid({
		domId:'grid2'
		,id:'id'
		,data:gridData
		,selectOption:{multiSelect:true,onclick:selectHandler2
		//,hideCheckAll:true	
		}
		,columns:[
			{text:"姓名",name:"username",style:{width:'100px'}}
			,{text:"联系地址",name:"addr",style:{'textAlign':'center'}}
			,{text:"出生日期",name:"birthday"}
			,{text:"年龄",name:"age"}
		]
		,actionButtons:[
			{text:'修改',onclick:update}
			,{text:'删除',onclick:del,showFun:function(rowData,rowIndex){
				// 如果是3的倍数就显示删除按钮
				return ((rowIndex+1) % 3 === 0)
			}}
		]
	});
	
	grid2.search();
	
});

function selectHandler(rowData,selectDom,rowIndex,tr) {
	FDLib.getEl('msg').innerHTML = ('username:' + rowData.username)
}
function selectHandler2(rowData,rowIndex,tr,selectDom) {
	FDLib.getEl('msg').innerHTML +=rowData.birthday + " ";
}
function update(rowData,rowIndex) {
	alert(rowIndex + " update: " + rowData.username);
}
function del(rowData,rowIndex) {
	alert(rowIndex + " del: " + rowData.username);
}
function refresh() {
	grid.refresh();
}
function checkRow(i) {
	grid2.checkRow(i);
}
function uncheckRow(i) {
	grid2.uncheckRow(i);
}
function uncheckAll() {
	grid2.uncheckAll();
}
function checkAll() {
	grid2.checkAll();
}
function setRowDisabled() {
	grid2.setRowDisabled(2);
	grid2.setRowDisabled(3);
	grid2.setRowDisabled(4);
}
function setRowEnabled() {
	grid2.setRowEnabled(2);
	grid2.setRowEnabled(3);
	grid2.setRowEnabled(4);
}
function getSelectedLine() {
	var data = grid.getSelected();
	FDLib.getEl('msg').innerHTML = '你选择了:' + data.username;
}
function getChecked() {
	var datas = grid2.getChecked();
	for(var i=0;i<datas.length;i++){
		var data = datas[i];
		FDLib.getEl('msg').innerHTML += data.username +' ';
	}
}
function onloadSelect(rowData,selector,rowIndex,tr){
	if(rowData.username == 'Jim3'){
		selector.disabled = 'disabled';
	}
	if(rowData.username == 'Jim5'){
		selector.setSelect(true);
	}
}
function selectRow(i){
	grid.selectRow(i)
}
function clearSelected(){
	grid.clearSelected()
}
function selectRecord(id){
	grid2.selectRecord(id)
}
</script>
</body>
</html>